import { defineComponent } from 'vue'
import CommentAll from './components/CommentAll'
import IconSelector from '@/components/nComponents/IconSelector'
import {
  NCollapseItem,
  NInput,
  NInputNumber,
  NSelect,
  NSwitch,
  NButton,
  NButtonGroup
} from 'naive-ui'
import type { PropType } from 'vue'
import type { questionSideListState } from '@/types/baseConfig'

export default defineComponent({
  name: 'RowLayoutEdit',
  props: {
    compData: {
      type: Object as PropType<questionSideListState>,
      default: () => {
        return {}
      }
    }
  },
  emits: ['save'],
  setup: function (props, { emit }) {
    const handSave = (e: questionSideListState) => {
      emit('save', e)
    }

    const autoFlowOptions = [
      {
        label: 'row',
        value: 'row'
      },
      {
        label: 'column',
        value: 'column'
      },
      {
        label: 'row dense',
        value: 'row dense'
      },
      {
        label: 'column dense',
        value: 'column dense'
      }
    ]
    const alignItemsOptions = [
      {
        label: 'start',
        value: 'start'
      },
      {
        label: 'end',
        value: 'end'
      },
      {
        label: 'center',
        value: 'center'
      },
      {
        label: 'stretch',
        value: 'stretch'
      }
    ]

    const alignContentOptions = [
      ...alignItemsOptions,
      {
        label: 'space-around',
        value: 'space-around'
      },
      {
        label: 'space-between',
        value: 'space-between'
      },
      {
        label: 'space-evenly',
        value: 'space-evenly'
      }
    ]
    return () => (
      <CommentAll
        comp-data={props.compData}
        onSave={handSave}
        v-slots={{
          default: ({
            info,
            handOptions,
            handSetting
          }: {
            info: questionSideListState
            handOptions: () => void
            handSetting: (labelKey: string) => void
          }) => (
            <NCollapseItem
              name="rowParams"
              v-slots={{
                header: () => (
                  <div class="cell flex item">
                    <div class="title u-line-1">宫格属性</div>
                  </div>
                ),
                default: () => (
                  <>
                    {info.RowLayoutForm && (
                      <div>
                        <div class="settingItemTitle">横向间隔槽</div>
                        <div class="edit-input">
                          <NInputNumber
                            v-model:value={info.RowLayoutForm.xGap}
                            placeholder="请输入xGap"
                            style={{ width: '110px' }}
                            onBlur={handOptions}
                          />
                        </div>
                        <div class="mt-[20px]">
                          <div class="settingItemTitle">纵向间隔槽</div>
                          <div class="edit-input">
                            <NInputNumber
                              v-model:value={info.RowLayoutForm.yGap}
                              placeholder="请输入yGap"
                              style={{ width: '110px' }}
                              onBlur={handOptions}
                            />
                          </div>
                        </div>
                        <div class="mt-[20px]">
                          <div class="settingItemTitle">autoFlow</div>
                          <div class="edit-input">
                            <NSelect
                              v-model:value={info.RowLayoutForm.autoFlow}
                              options={autoFlowOptions}
                              placeholder="请选择"
                              clearable
                              onUpdateValue={handOptions}
                            />
                          </div>
                        </div>
                        <div class="mt-[20px]">
                          <div class="settingItemTitle">alignItems</div>
                          <div class="edit-input">
                            <NSelect
                              v-model:value={info.RowLayoutForm.alignItems}
                              options={alignItemsOptions}
                              placeholder="请选择"
                              clearable
                              onUpdateValue={handOptions}
                            />
                          </div>
                        </div>
                        <div class="mt-[20px]">
                          <div class="settingItemTitle">justifyItems</div>
                          <div class="edit-input">
                            <NSelect
                              v-model:value={info.RowLayoutForm.justifyItems}
                              options={alignItemsOptions}
                              placeholder="请选择"
                              clearable
                              onUpdateValue={handOptions}
                            />
                          </div>
                        </div>
                        <div class="mt-[20px]">
                          <div class="settingItemTitle">alignContent</div>
                          <div class="edit-input">
                            <NSelect
                              v-model:value={info.RowLayoutForm.alignContent}
                              options={alignContentOptions}
                              placeholder="请选择"
                              clearable
                              onUpdateValue={handOptions}
                            />
                          </div>
                        </div>
                        <div class="mt-[20px]">
                          <div class="settingItemTitle">justifyContent</div>
                          <div class="edit-input">
                            <NSelect
                              v-model:value={info.RowLayoutForm.justifyContent}
                              options={alignContentOptions}
                              placeholder="请选择"
                              clearable
                              onUpdateValue={handOptions}
                            />
                          </div>
                        </div>
                        <div class="mt-[20px] flex items-center">
                          <div class="settingItemTitle">自定义样式</div>
                          <div class="settingItemTitle">去设置</div>
                          <div class="flex-1 ml-[5px]">
                            <NButton
                              round
                              size="small"
                              onClick={() => handSetting('RowLayoutForm.zdyStyle')}
                            >
                              去设置
                            </NButton>
                          </div>
                        </div>
                      </div>
                    )}
                  </>
                )
              }}
            />
          )
        }}
      />
    )
  }
})
